<script setup>
import { menu } from './test'
import { onMounted, ref,computed } from 'vue'
import { useContextMenu } from './menuContext'
const emits = defineEmits(['select'])
const contain = ref()
const { x, y, visible } = useContextMenu(contain)
function select(i) {
    emits('select', i)
}

function handlerClick(item) {
    visible.value = false
    emits('select', item)
}

function handlerbeforEnter(el) {
    el.style.height = 0
}
function hanlderEnter(el) {
    el.style.height = 'auto'
    const h = el.clientHeight
    el.style.height = 0
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            el.style.height = h + 'px'
            el.style.transition = '0.5s'
        })
    })
}
function hanlderAfterEnter(el) {
    el.style.transition = 'none'
}

</script>

<template>
    <div ref="contain">
        <slot name="item"></slot>
        <Teleport to="body">
            <Transition @beforeEnter="handlerbeforEnter" @enter="hanlderEnter" @afterEnter="hanlderAfterEnter">
                <div v-if="visible" class="menu context-menu" :style="{ left: x + 'px', top: y + 'px', }" >
                    <ul>
                        <a href="" v-for="(u, i) in menu" :key="i" @click.prevent="handlerClick(u)">
                            <li>{{ u.lable }}</li>
                        </a>
                    </ul>
                </div>
            </Transition>
        </Teleport>
    </div>
</template>

<style scoped lang="less">
.menu {
    position: fixed;
    background-color: white;
    padding: 5px 0 0 0;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    ul {
        min-width: 50px;

        a {
            text-decoration: none;
            color: black
        }

        li:hover {
            background-color: rgb(223, 227, 230);
            color: rgb(95, 93, 93);
        }

        li {
            height: 20px;
            text-align: center;
            line-height: 20px;
            list-style: none;
            transition: 0.2s;
        }
    }
}</style>